<template>
    <div class="img-loader-container">
        <Upload 
            v-if="editMode" 
            action="/api/file/img/upload-file" 
            :disabled="imgList.length == maxFile" 
            :on-success="success" 
            :format="['jpg','jpeg','png']" 
            :show-upload-list="false">
            <Button icon="ios-cloud-upload-outline" @click="upload">上传图片</Button>
        </Upload>
        <br>
        <div 
            v-for="(item, index) in imgList" 
            :key="index" 
            @click="jump(item)" 
            class="img-loaded-item" 
            :style="getImg(item)">
            <p class="img-loaded-del" v-if="editMode" @click="modal = true; delIndex = index">X</p>
        </div>
        <div class="img-loaded-del-modal" v-if="modal">
            <p class="img-loaded-del-modal-close" @click="modal = false">X</p>
            <p>将直接从服务器删除图片 {{imgList[delIndex]}}</p>
            <p>你确定继续吗?</p>
            <input type="button" value="删除" class="img-loaded-del-modal-ok" @click="del()">
        </div>
    </div>
</template>

<script>
import local_vuex from "@iload/js/vuex";
import file_request from "@/axios/file";

export default {
    props: {
        iList: {
            type: Array,
            default: () => {
                return [];
            }
        },
        editMode: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            tipFlag: true,      // 是否显示提示
            maxFile: 9,         // 图片上传个数上限
            imgList: [],        // 图片列表
            modal: false,       // 删除对话框的显示与否
            delIndex: -1        // 删除图片下标
        }
    },
    watch: {
        imgList() {
            this.$emit("on-change", this.imgList);
        },
        iList() {
            this.imgList = this.iList;
            local_vuex.state.imgList = this.imgList;
        }
    },
    methods: {
        /**
         * 图片上传成功钩子函数
         * @param {Object} res 响应体
         */
        success(res) {
            this.$Message.success(res.message);
            this.imgList.push(res.data);
        },
        /**
         * 从服务器获取图片
         * @param {String} src 图片地址
         */
        getImg(src) {
            return {
                background: `url(/img/${src})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
            }
        },
        /**
         * 上传图片
         */
        upload() {
            if (this.imgList.length == this.maxFile) {
                this.$Message.warning(`最多上传 ${this.maxFile} 个文件`);
            }
        },
        /**
         * 删除图片
         */
        del() {
            file_request.delete_file(this.imgList[this.delIndex]);
            let res = this.imgList.splice(this.delIndex, 1);
            this.modal = false;
        },
        /**
         * 在新窗口打开图片
         * @param {String} path 图片地址
         */
        jump(path) {
            if (!this.modal) {
                window.open(`/img/${path}`);
            }
        }
    }
}
</script>

<style lang="scss">
@import "@iload/scss/index.scss";
</style>